<template>
  <div class="indexPage">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu">
    </Header>
    <div class="secetion">
      <div class="swiper-container swiper-container1">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in banner">
            <router-link :to="{path:'article',query:{id:item.id,url:item.url}}" >
              <a >
                <img :src=item.thumb alt="" onerror="this.onerror=null; this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
              </a>
            </router-link>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="itemNav">
        <div v-for="(item,index) in itemNav" >
          <router-link  :to="{path:item.pathName}">
            <a >
              <p><img :src=item.img alt="" onerror="this.onerror=null;this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'"></p>
              <span >{{item.name}}</span>
            </a>
          </router-link>
        </div>
      </div>
      <div class="swiper-container swiper-container2" >
        <router-link :to="{path:'/store'}">
          <!--<p class="swiper-left">-->
            <!--<a ><span>通知<br/>公告</span></a>-->
          <!--</p>-->
          <!--<div class="swiper-right">-->
            <!--<p v-for="(item,index) in notice"><a>{{item.title}}</a></p>-->
          <!--</div>-->
        </router-link>

      </div>
      <!--党建要问-->
      <div class="partNews">
        <div class="title clearfix partNewsTitle1">
          <p class="left">
            党建要闻
          </p>
          <router-link :to="{path:'/partNews'}" >
              <a ><span class="right">更多</span></a>
          </router-link>
        </div>
        <div class="partNewsContent" v-for="(item,index) in news">
          <router-link :to="{path:'/article',query:{id:item.id,url:item.url,is_praise:item.is_praise}}" >
              <a class="newsItem" >
                <div class="newsItemText">
                  <p class="newsItemTitle">{{item.title}}</p>
                  <p class="newsItemContent">
                    {{item.content}}
                  </p>
                </div>
                <div class="newsItemImg">
                  <img :src=item.thumb  onerror="this.onerror=null;this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
                </div>
              </a>
          </router-link>
        </div>
      </div>
      <div class="swiper-container swiper-container3">
        <router-link :to="{path:'/notice'}">
          <p class="swiper-left">
          <a ><span>通知<br/>公告</span></a>
          </p>
          <div class="swiper-right">
          <!--<p v-for="(item,index) in notice"><a>{{item.title}}</a></p>-->
          </div>
        </router-link>
        <!--<div class="swiper-wrapper">-->
          <!--<div class="swiper-slide">-->
            <!--<a >-->
           <!---->
              <!--<img :src=ad.length&&ad[0].thumb  alt="" onerror="this.onerror=null;this.src='../../static/images/codeCover2.jpg'">-->
            <!--</a>-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <!--党校-->
      <div class="partSchool">
        <div class="title clearfix">
          <p class="left">
            微党校
          </p>
          <router-link :to="{path:'/partScholl'}" >
          <a ><span class="right">更多</span></a>
          </router-link>
        </div>
        <!--党校视频列表-->
        <div class="partVideoList" >
          <router-link :to="{path:'/videoList',query:{class_id:item.id,url:item.url}}" v-for="(item,index) in scholl" :key="index">
              <a  class="videoItem">
                <p class="videoItemTop">
                  <img :src=item.thumb alt="" onerror="this.onerror=null; this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
                  <span>
                      <img src="https://api.cloudcpc.com/static/index/images/videoPlay.jpg" alt="">
                    </span>
                </p>
                <p class="videoItemMiddle">{{item.name}}</p>
                <p class="videoItemBottom">
                  <span>{{item.visit}}</span>
                </p>
              </a>
          </router-link>
        </div>
      </div>
      <div class="swiper-container swiper-container4">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a >
              <img :src=ad.length&&ad[1].thumb onerror="this.onerror=null; this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
            </a>
          </div>
        </div>
      </div>
      <!--<div class="onlineExam">-->
        <!--<div class="title partNewsTitle1 clearfix">-->
          <!--<p class="left">-->
            <!--在线考试-->
          <!--</p>-->
          <!--<span class="right">更多</span>-->
        <!--</div>-->
        <!--<div class="onlineExamWrap">-->
          <!--<a href="" class="onlineItem">-->
            <!--<div class="onlineExamLeft">-->
              <!--<p class="onlineTitle">-->
                <!--学习贯彻十九大精神知识自测-->
              <!--</p>-->
              <!--<p class="onlineDate">2018年7月3日  18:00截止</p>-->
            <!--</div>-->
            <!--<div class="onlineExamRight">-->
              <!--<p class="onlineBtn">进行中</p>-->
              <!--<p class="onlineJoin">2568人参加</p>-->
            <!--</div>-->
          <!--</a>-->

        <!--</div>-->
      <!--</div>-->

      <!--底部-->
      <!--<div class="swiper-container swiper-container3">-->
        <!--<div class="swiper-wrapper">-->
          <!--<div class="swiper-slide">-->
            <!--<a >-->
              <!--<img :src=ad.length&&ad[1].thumb>-->
            <!--</a>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <div class="footeBanner">
        <img src="https://api.cloudcpc.com/static/index/images/footerBanner.jpg" alt="">
        <div class="footerText">
          <div class="title clearfix">
            <p class="left">
              一颗红心
            </p>
            <a>
              <router-link :to="{path:'/heart'}">
                <span class="right">更多</span>
              </router-link>
            </a>
          </div>
          <div class="footerContent">
            <!--<vue-seamless-scroll :data="listData" class="seamless-warp">-->
              <!--<ul class="item">-->
                <!--<li v-for="item in listData">-->
                  <!--<span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>-->
                <!--</li>-->
              <!--</ul>-->
            <!--</vue-seamless-scroll>-->
            <!--<vue-seamless-scroll :data="heart"  :class-option="classOption" class="seamless-warp">-->
              <!--<slot>-->
                <ul class="item" :class="{anima:ani==true}">
                  <li v-for="(item,index) in heart">
                    <!--<router-link :to="{path:'/article',query:{url:item.url,id:item.id}}">-->
                    <a >{{item.title}}</a>
                    <!--</router-link>-->
                  </li>
                </ul>
              <!--</slot>-->
            <!--</vue-seamless-scroll>-->
          </div>
          <!--<p class="address">-->
                    <!--<span>-->
                        <!--版权所有©武汉纺友技术有限公司&nbsp;&nbsp;&nbsp;鄂ICP备09014919号-44-->
                    <!--</span>-->

          <!--</p>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script >
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  import {mapState,mapMutations} from 'vuex'
//  import Vue from 'vue'
  import vueSeamlessScroll from 'vue-seamless-scroll'
//  Vue.use(vueSeamlessScroll)
  export default({
    data (){
          return {
            showTitle:false,
            ani:false,
            title:'新风国机云平台',
            itemNav:[
              {
                  img:'https://api.cloudcpc.com/static/index/images/item1.png',
                  pathName:'partNews',
                   name:'党建要闻'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item2.png',
                pathName:'partScholl',
                name:'微党校'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item3.png',
                pathName:'ffcl',
                name:'反腐倡廉'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item4.png',
                pathName:'assessment',
                name:'积分考核'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item5.png',
                pathName:'partAlbum',
                name:'党建相册'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item6.png',
                pathName:'onLineExam',
                name:'党建考堂'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item7.png',
                pathName:'store',
                name:'应用商店'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item8.png',
                pathName:'supervise',
                name:'群众监督'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item9.png',
                pathName:'heart',
                name:'一颗红心'
              },
              {
                img:'https://api.cloudcpc.com/static/index/images/item10.png',
                pathName:'activity',
                name:'活动报名'
              }
            ],
            banner:[],
            notice:[],
            news:[],
            scholl:[],
            heart:[],
            ad:[]
          }
    },
    components:{
     Aside:aside,
      Header:header,
      VueSeamlessScroll:vueSeamlessScroll
    },
    computed:{
      ...mapState({
        uid:state =>state.app.loginState.uid||localStorage.getItem('uid'),
        token:state=>state.app.loginState.token
    }),
      classOption () {
          return {
            direction:0,
            autoPlay:true,
            step:1,
          }
      }
    },
    methods:{
      ...mapMutations(['getUserCompanyId']),
      scrollLi(){
        this.ani = true
        setTimeout(() => {
          this.heart.push(this.heart[0]);
          this.heart.shift();
          this.ani = false;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 1500)
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      getQueryParam(name, url) {
        //URL GET 获取值
        var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i"),
          Url = url || location.href;
        if (reg.test(Url))
          return decodeURI(RegExp.$2.replace(/\+/g, " "));
        return "";
      },
    },
    mounted(){
      let that =this
      this.getUserCompanyId({
        company_id:this.getQueryParam('company_id',window.location.href)
      })
      console.log(this.baseUrl)
      this.axios.get('/home/index/getIndex?'+`${this.baseUrl}`)
        .then((res)=> {
          console.log(res.data)
          console.log(res.data.data)
          that.banner =res.data.data.banner
          that.notice =res.data.data.notice
          that.news  =res.data.data.news
          that.scholl=res.data.data.school
          that.heart =res.data.data.heart
          that.ad =res.data.data.ad
          setInterval(that.scrollLi,2000)
        })
        .catch((err)=>{
          console.log(err)
        })
      console.log(this.getQueryParam('company_id',window.location.href))
      $('body').removeClass('active')
      var swiper =new this.Swiper('.swiper-container1',{
      autoplay:true,
      pagination:{
        el:'.swiper-pagination'
      }
    })
    },
    created(){

    }
  })
</script>
<style scoped>
  .swiper-container1{
    overflow: hidden;
  }
  .anima{
    transition: ease 2s;
    margin-top: -32px;
  }
  .swiper-container1 .swiper-wrapper{
    height: 100%;
  }
  .swiper-container1 .swiper-slide{
    height: 100%;
  }
  .swiper-container .swiper-slide img{
    width: 100%;
  }
  .swiper-container1 .swiper-slide
 .swiper-container >>>  .swiper-pagination-bullet-active{
    background: white !important;
  }
  .swiper-container >>> .swiper-pagination-bullet{
    background: #ccc !important;
  }
  .secetion {
    position: relative;
    top: 0.8rem;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-y: scroll;
    /*display: none;*/
    transition: all 0.2s ease-in-out;
    height: 100%;
    -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
    -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  }

  .swiper-container1 {
    height: 4rem;
    /* top:0.8rem; */
    margin: 0 auto;
  }

  .swiper-container1 img {
    max-width: 100%;
    height: 4rem;
  }

  /*itemNav*/
  .itemNav {
    font-size: 0;
  }

  .itemNav > div {
    height: 1.8rem;
    width: 20%;
    overflow: hidden;
    display: inline-block;
    text-align: center;
  }

  .itemNav > div p {
    height: 1.3rem;
    width: 100%;
    text-align: center;
    line-height: 1.3rem;

  }

  .itemNav > div p img {
    /*display: table-cell;*/
    /*text-align: center;*/
    width: 0.72rem;
    vertical-align: middle;
  }
  .itemNav >div:nth-child(1) img{
    width: 0.72rem;
  }
  .itemNav >div:nth-child(2) img{
     width: 0.83rem;
   }
  .itemNav >div:nth-child(3) img{
    width: 0.72rem;
  }
  .itemNav >div:nth-child(4) img{
    width: 0.71rem;
  }
  .itemNav >div:nth-child(5) img{
    width: 0.76rem;
  }

  .itemNav >div:nth-child(6) img{
    width: 0.95rem;
  }
  .itemNav >div:nth-child(7) img{
    width: 0.67rem;
  }
  .itemNav >div:nth-child(8) img{
    width: 0.69rem;
  }
  .itemNav >div:nth-child(9) img{
    width: 0.78rem;
  }
  .itemNav >div:nth-child(10) img{
    width: 0.78rem;
  }
  .itemNav > div span {
    /*font-size: 0.26rem;*/
    font-size: 14px;
    color: #000000;
  }

  .swiper-container3 {
    padding: 0.2rem 0;
    background: #f9f5f5;
    height: 1.24rem;
  }

  .swiper-container2 img {
    height: 1.24rem;
  }

  .swiper-container2,
  .swiper-container3{
    padding: 0.2rem 0;
    height: 1.24rem;
    background: url(https://api.cloudcpc.com/static/index/images/slider1.jpg) #f9f5f5 center no-repeat;
    background-size: 100% 1.24rem;
  }
  .swiper-container3{
    background: url(https://api.cloudcpc.com//static/index/images/slider01.jpg) #f9f5f5 center no-repeat;
    background-size: 100% 1.24rem;
  }
  .swiper-container4{
    height: 1.8rem;
    padding: 0.2rem 0;
    background: #f9f5f5;
  }
  .swiper-container2 a,.swiper-container3 a{
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: block;
    width: 100%;
    height: 100%;
  }
  .swiper-left {
    width: 0.88rem;
    margin-left: 0.32rem;
    height: 100%;
    height: 0.88rem;
    border-radius: 0.12rem;
    background-color: #e32b2c;
    margin-top: 0.18rem

  }

  .swiper-left span {
    display: inline-block;
    width: 0.88rem;
    /*font-size: 0.32rem;*/
    font-size: 16px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    margin-top: 0.05rem;

  }

  .swiper-left img {
    width: 0.94rem;
    height: 0.94rem;
    margin-top: 0.15rem
  }

  .swiper-right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: 0.23rem;
    margin-right: 0.32rem;
    /*font-size: 0.24rem;*/
    font-size: 12px;
    margin-top: 0.2rem;
    height: 100%;
    overflow: hidden;
  }

  .swiper-right p {
    /*font-size: 0.28rem;*/
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 0.05rem
  }

  .swiper-right p a {
    color: #e32b2c;
    position: relative;
    padding-left: 0.25rem;
  }
  .swiper-right p a:before{
    position: absolute;
    content: '';
    left: 0;
    top:50%;
    width:0.12rem ;
    height:0.12rem ;
    background:#ea695d ;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-top: -0.06rem;
  }
    /*partNews*/
  .partNews, .partSchool, .onlineExam {
    padding: 0 0.32rem;
  }

  .title {
    padding-top: 0.3rem;
    height: 0.6rem;
    line-height: 0.6rem;
    padding-bottom: 0.35rem;
  }

  .partNewsTitle1 {
    padding-bottom: 0;
  }

  .onlineExamWrap {
    padding-bottom: 0.2rem;
  }

  .title .left {
    /*font-size: 0.36rem;*/
    font-size:18px;
    color: #333333;
    font-weight: bold;
    position: relative;
    padding-left: 0.63rem;

  }

  .title .left:after {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    width: 0.45rem;
    height: 0.41rem;
    background-image: url("../../../static/images/star.png");
    background-size: 0.45rem 0.41rem;
    background-repeat: no-repeat;
    margin-top: -0.2rem;

  }

  .title .right {
    /*font-size: 0.26rem;*/
    font-size:12px;
    color: #e32b2c;
  }

  /*slide2*/
  .swiper-container3 {
    height: 1.24rem;
  }

  .swiper-container3 img {
    height: 1.24rem;
  }

  .partVideoList {
    font-size: 0;
    vertical-align: top;
  }

  .videoItem {
    display: inline-block;
    width: 3.3rem;
    padding-bottom: 0.35rem;
    vertical-align: top;
  }

  .videoItem:nth-child(odd) {
    margin-right: 0.1rem;
  }

  .videoItem:nth-child(even) {
    margin-left: 0.1rem;
  }

  .videoItem .videoItemTop {
    position: relative;
    height: 2rem;
  }

  .videoItem .videoItemTop > img {
    display: inline-block;
    width: 100%;
    height: 2rem;

  }

  .videoItem .videoItemTop span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0.52rem;
    height: 0.52rem;
  }
  .videoItem .videoItemMiddle {
    /*font-size: 0.3rem;*/
    font-size:16px;
    color: #333333;
    margin: 0.15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 0.6rem;
    text-overflow: ellipsis;
    height: 0.9rem;
    line-height: 0.45rem;
  }

  .videoItem a {
    vertical-align: top
  }

  .videoItem .videoItemBottom {
    /*font-size: 0.26rem;*/
    font-size: 13px;
    color: #999999;
    padding-left: 0.5rem;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .videoItem .videoItemBottom:before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    width: 0.36rem;
    height: 0.28rem;
    background-image: url("../../../static/images/eyes.png");
    background-size: 0.36rem 0.28rem;
    background-repeat: no-repeat;
    margin-top: -0.15rem;
  }


  .onlineItem {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.2rem 0;
  }

  .onlineItem .onlineExamLeft {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }

  .onlineItem .onlineExamLeft .onlineTitle {
    /*font-size: 0.32rem;*/
    font-size: 16px;
    color: #333333;
  }

  .onlineItem .onlineExamLeft .onlineDate {
    color: #666666;
    /*font-size: 0.26rem;*/
    font-size: 12px;
  }

  .onlineItem .onlineExamRight {
    width: 1.4rem;
  }

  .onlineItem .onlineExamRight .onlineBtn {
    width: 100%;
    text-align: center;
    height: 0.48rem;
    line-height: 0.48rem;
    /*font-size: 0.26rem;*/
    font-size: 12px;
    color: #ffffff;
    border-radius: 0.07rem;
    -webkit-border-radius: 0.07rem;
    background: #e32b2c;
  }

  .onlineItem .onlineExamRight .onlineJoin {
    color: #999999;
    /*font-size: 0.2rem;*/
    font-size: 12px;
    text-align: center;
  }

  /*footeBanner*/
  .footeBanner {
    width: 100%;
    height: 4.17rem;
    position: relative;
  }

  .footeBanner img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .footeBanner .footerText {
    position: absolute;
    left: 0.32rem;
    right: 0.32rem;
    top: 0;
    height: 100%;
    z-index: 2;
  }
  .footeBanner .footerContent{
    height: 64px;
    overflow: hidden;
  }
  .footeBanner .footerContent a {
    /*font-size: 0.32rem;*/
    font-size:16px;
    color: #e32b2c;
    line-height: 32px;
    position: relative;
    font-weight: bold;
    padding-left: 24px;
  }
  .footeBanner .footerContent a:before{
      position: absolute;
    content: '';
      left: 0;
      top:50%;
      margin-top: -7px;
    width:13px;
    height: 14px;
    background-image: url("../../../static/images/star-2.png");
    background-size: 13px 14px;
    background-repeat: no-repeat;
    background-position: center;
  }
.seamless-warp{
  height: 64px;
  overflow: hidden;
}
  .footeBanner .address {
    /*font-size: 0.18rem;*/
    font-size: 10px;
    color: #000000;
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    text-align: center;
    width: 100%;
  }
  .header  >>> span.left:after{
  width: 0;
  }
  .newsItem .newsItemImg img{
    width: 100%;
    height: 100%;
  }
  .swiper-container3 .swiper-slide a{
    display: block;
    width: 100%;
    height: 100%;
  }
  .swiper-container3 .swiper-slide a img{
    width: 100%;
    height: 100%;
  }
</style>
